<template>
	<view class="waterSupply_anjian">
		<uni-uform v-model="form" :label-width="100" ref="uform" :config="config" :rules="rules"
			validate-trigger="bind">
		</uni-uform>
		<view class="" style="display: flex;justify-content: space-around;">
			<uni-button @click="gofile">附件</uni-button>
			<uni-button @click="sub">办理进度</uni-button>
			<uni-button>反馈</uni-button>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		watch: {
			config: {
				handler: function() {}
			}
		},
		data() {
			let self = this
			return {
				form: { // 建议申明属性与config数组的name保持一致
					ss_bm: '1',
					ss_dl: new Date(),
					ss_xl: 1,
					ss_bm: '1',
					zr_dw: 0,
					phone: '',
					number: 10,
					ajms: '',
					wzsm: ''
				},
				config: [{
						name: 'ss_dl',
						label: '事发时间',
						// isSlot: true, // 开启插槽
						component: 'uni-datetime-picker', // 注册组件同名 全局的一般是component文件夹自动注册，自定义组件可以放这个文件夹
						extra: { // 组件属性
							type: 'datetime',
							// disabled: true
							// placeholder: "请选择设施大类",
						},
						event: { //推荐箭头函数这样方便和组件交互 组件方法 与组件库方法保持一致 自定义组件也保持一致 
							change: function(e) {
								console.log(e)
							},
							input: function(e) {
								console.log(e)
							},
							maskClick: function(e) {
								console.log(e, 'ss')
							},
						}
					},
					{
						name: 'ss_xl',
						label: '案件编号',
						component: 'uni-easyinput',
						extra: {
							style: 'background-color: #fff;',
							placeholder: "行政区域",
							localdata: []
						},
						event: {
							change: (e) => { // 操作 form字段的示例 改变config
								console.log(e, 'ss1', this)
								// let {
								// 	index,
								// 	item
								// } = this.getItem('email')
								// this.delform[index] = item
								// this.config.splice(index, 1)
								// this.read()
								// setTimeout(() => {
								// 	this.config.splice(index, 0, this.delform[index])
								// }, 5000)
							}
						}
					},
					{
						name: 'zr_dw',
						label: '案件级别',
						component: 'uni-data-select',
						extra: {
							placeholder: "请选择案件级别",
							localdata: [{
								value: 0,
								text: "紧急事件"
							}]
						},
						event: {
							change: function(e) {
								console.log(e)
							}
						}
					},
					{
						name: 'zr_dw1',
						label: '案件状态',
						component: 'uni-data-select',
						extra: {
							placeholder: "请选择案件级别",
							localdata: [{
								value: 0,
								text: "待处理"
							}]
						},
						event: {
							change: function(e) {
								console.log(e)
							}
						}
					},
					{
						name: 'phone',
						label: '所属区域',
						component: 'uni-easyinput',
						extra: {
							placeholder: "请输入所属区域",
						},
						event: {
							change: function(e) {
								console.log(e)
							}
						}
					},
					{
							name: 'ss_dl1',
							label: '事发时间',
							// isSlot: true, // 开启插槽
							component: 'uni-datetime-picker', // 注册组件同名 全局的一般是component文件夹自动注册，自定义组件可以放这个文件夹
							extra: { // 组件属性
								type: 'datetime',
								// disabled: true
								// placeholder: "请选择设施大类",
							},
							event: { //推荐箭头函数这样方便和组件交互 组件方法 与组件库方法保持一致 自定义组件也保持一致 
								change: function(e) {
									console.log(e)
								},
								input: function(e) {
									console.log(e)
								},
								maskClick: function(e) {
									console.log(e, 'ss')
								},
							}
						},
						{
							name: 'ajms1',
							label: '处置要求',
							component: 'uni-easyinput',
							extra: {
								placeholder: "请选择设施大类",
							},
							event: {
								change: function(e) {
									console.log(e)
								},
								input: function(e) {
									console.log(e)
								}
							}
						},
					{
						name: 'ajms',
						label: '案件描述',
						component: 'uni-easyinput',
						extra: {
							type: "textarea",
							placeholder: "请选择设施大类",
						},
						event: {
							change: function(e) {
								console.log(e)
							},
							input: function(e) {
								console.log(e)
							}
						}
					},
					{
						name: 'wzsm',
						label: '位置说明',
						component: 'uni-easyinput',
						extra: {
							type: "textarea",
							placeholder: "位置说明",
						},
						event: {
							change: function(e) {
								console.log(e)
							},
							input: function(e) {
								console.log(e)
							}
						}
					}
				],
				rules: {
					ss_dl: {
						rules: [{
							required: true,
							errorMessage: '不能为空',
						}]
					},
					// // 对name字段进行必填验证
					ss_bm: {
						rules: [{
								required: true,
								errorMessage: '不能为空',
							},
							{
								minLength: 3,
								maxLength: 10,
								errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
							}
						]
					},
					// 对email字段进行必填验证
					phone: {
						rules: [{
								required: true,
								errorMessage: '请输入手机号码',
							},
							{
								pattern: /^1[0-9]{10,10}$/,
								errorMessage: '请输入正确的手机号码',
								//     validateFunction: function(rule, value, data, callback) {
								// 		if (value.length > 20 || value.length < 8) {
								// 			callback('密码长度在8-20位！')
								// 		} else {
								// 		    callback();
								// 	    }
								// 	}
							}

						]
					}
				},
				delform: {}
			}
		},
		mounted() {},
		methods: {
			sub() {
				let form = this.$refs.uform.getForm()
				form.validate().then(res => {
					console.log('表单数据信息：', res, this.form);
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			gofile () {
				uni.navigateTo({
					url:'/pages/waterSupply/xuncha/file/file'
				})
			},
			getItem(name) {
				return {
					item: this.config.find(res => res.name === name),
					index: this.config.findIndex(res => res.name === name)
				}
			},
			getItems(arr = []) {
				let obj = {}
				arr.map(res => {
					obj[res] = this.getItem(res)
				})
				return obj
			}
		}
	}
</script>

<style>
	.waterSupply_anjian {
		padding: 30rpx;
	}
</style>